<template>
    <div class="modify_box" v-show="openModify">
        <div class="Modify_content">
            <p class="Modify_content_head">
                <span>{{title}}</span>
                <span class="close" @click="handClose">关闭</span>
            </p>
            <hr/>
            <p>{{content}}</p>
            <div class="modify_bottom">
                <div class="modify_bottom_botton">
                    <el-button type="danger" size="mini" @click="handlEmit">确认</el-button> 
                    <el-button type="info" size="mini" @click="handClose">取消</el-button>
                </div> 
            </div>
        </div>
    </div>
</template>
<script>
export default {
    // props:['openModify','context'],
    props:{
        openModify:{
            type:Boolean,
            require:true,
        },
        context:{
            type:String ,
            default: '',
            require:false
        }
    },
    data(){
        return {
            title:"删除",
            resolve: "",
            reject: "",
            content: this.context || "确认要删除数据吗？" ,
        }
    },

    methods:{
        handClose(){
            if (this.$vnode) {
                this.$emit('handClose',false)
            }else{
                this.clickCancel()
            }
        },
        handlEmit(){
            if (this.$vnode){
                this.$emit('handlEmit',false)
            }else{
                this.clickConfirm()
            }
        },


    clickConfirm() {
      this.openModify = false;
      this.resolve("confirm");
    },
    clickCancel() {
      this.openModify = false;
      this.reject("cancel");
    },

    showMsgBox: function () {
      return new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      });
    },

    mounted() {
        console.log("this==",this)
    },
    }
}
</script>
<style scoped>
    .modify_box{
        z-index: 100;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
    }
    .Modify_content{
        min-width: 400px;
        min-height: 300px;
        position: absolute;
        border-radius: 20px;

        background-color: #ffffff;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 20px;
    }
    .Modify_content_head {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .close{
        font-size: 14px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        border-radius: 50%;
        background-color:red;
        color: white;
    }
    .close:hover{
        cursor: pointer;
    }
    .modify_bottom {
        position: fixed;
        bottom: 5px;
    }
    .modify_bottom_botton {
        width: 360px;
        display: flex;
        justify-content: center;
    }
</style>